<template>
  <div>
    <el-dialog
      title="提示"
      :visible="pushType"
      width="60%"
      @close="onClose"
    >

      <el-table
        :data="pushData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="class_name"
          label="班级名称"
          width="180"
        />
        <el-table-column
          label="考试状态"
        >
          <div>主考：<span>待设定时间</span> </div>
        </el-table-column>
        <el-table-column
          label="操作"
          width="100px"
        >
          <template #default="{ row }">
            <div class="examColor cursor" @click="onRelieve(row)">解除绑定</div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { postExamExamBindClass } from '@/api/exam'

export default {
  props: {
    pushType: {
      type: Boolean,
      default: false
    },
    pushData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      queryData: {
        class_id: '',
        del: true,
        exam_id: ''
      }
    }
  },
  methods: {
    onClose() {
      this.$parent.pushType = false
    },
    onRelieve(row) {
      console.log(row)
      this.queryData.class_id = row.class_id
      this.queryData.exam_id = row.exam_id
      this.$confirm('你确定要删除?', '提示', {
        type: 'warning'
      }).then(async() => {
        this.$message.success('删除成功!')
        const res = await postExamExamBindClass(this.queryData)
        // 关弹窗
        this.onClose()
        // 刷新页面
        this.$parent.initData()
        console.log('🚀 ~ res:', res)
      }).catch(() => {
        this.$message('已取消删除')
      })
    }

  }
}
</script>

<style scoped>
.examColor{
  color: #409eff;
}

.cursor{
  cursor:pointer;
}
</style>
